{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>完美居中轮播演示</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 自定义CSS -->
    <link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>
<body>
    <div class="container py-5">
        <h1 class="text-center mb-5">完美居中轮播演示</h1>
        
        <!-- 效果1: Bootstrap轮播 -->
        <section class="mb-5">
            <h2 class="mb-3 text-center">1. Bootstrap居中轮播</h2>
            <div id="bootstrapCarousel" class="carousel slide bootstrap-carousel" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="img-container">
                            <img src="{% static 'images/1.jpg' %}" class="d-block" alt="图片1">
                        </div>
                        <div class="carousel-caption d-none d-md-block">
                            <h5>自然风光</h5>
                            <p>美丽的山川湖泊</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="img-container">
                            <img src="{% static 'images/2.jpg' %}" class="d-block" alt="图片2">
                        </div>
                        <div class="carousel-caption d-none d-md-block">
                            <h5>城市夜景</h5>
                            <p>繁华的城市灯光</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="img-container">
                            <img src="{% static 'images/3.jpg' %}" class="d-block" alt="图片3">
                        </div>
                        <div class="carousel-caption d-none d-md-block">
                            <h5>海滩日落</h5>
                            <p>宁静的海边黄昏</p>
                        </div>
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#bootstrapCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#bootstrapCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </button>
            </div>
        </section>
        
        <!-- 效果2: CSS淡入淡出轮播 -->
        <section class="mb-5">
            <h2 class="mb-3 text-center">2. CSS淡入淡出居中轮播</h2>
            <div class="css-fade-carousel">
                <div class="css-fade-slide active">
                    <div class="img-container">
                        <img src="{% static 'images/1.jpg' %}" alt="图片1">
                    </div>
                    <div class="slide-caption">
                        <h3>自然风光</h3>
                        <p>美丽的山川湖泊</p>
                    </div>
                </div>
                <div class="css-fade-slide">
                    <div class="img-container">
                        <img src="{% static 'images/2.jpg' %}" alt="图片2">
                    </div>
                    <div class="slide-caption">
                        <h3>城市夜景</h3>
                        <p>繁华的城市灯光</p>
                    </div>
                </div>
                <div class="css-fade-slide">
                    <div class="img-container">
                        <img src="{% static 'images/3.jpg' %}" alt="图片3">
                    </div>
                    <div class="slide-caption">
                        <h3>海滩日落</h3>
                        <p>宁静的海边黄昏</p>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 效果3: JavaScript滑动轮播 -->
        <section class="mb-5">
            <h2 class="mb-3 text-center">3. JS居中滑动轮播</h2>
            <div class="js-slide-carousel">
                <div class="js-slide-container">
                    <div class="js-slide">
                        <div class="img-container">
                            <img src="{% static 'images/1.jpg' %}" alt="图片1">
                        </div>
                        <div class="slide-caption">
                            <h3>自然风光</h3>
                            <p>美丽的山川湖泊</p>
                        </div>
                    </div>
                    <div class="js-slide">
                        <div class="img-container">
                            <img src="{% static 'images/2.jpg' %}" alt="图片2">
                        </div>
                        <div class="slide-caption">
                            <h3>城市夜景</h3>
                            <p>繁华的城市灯光</p>
                        </div>
                    </div>
                    <div class="js-slide">
                        <div class="img-container">
                            <img src="{% static 'images/3.jpg' %}" alt="图片3">
                        </div>
                        <div class="slide-caption">
                            <h3>海滩日落</h3>
                            <p>宁静的海边黄昏</p>
                        </div>
                    </div>
                </div>
                <button class="js-prev">❮</button>
                <button class="js-next">❯</button>
            </div>
        </section>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 自定义JS -->
    <script src="{% static 'js/scripts.js' %}"></script>
</body>
</html>
